{{#if isMenu}}
{{!-- this is the status menu --}}
  <div class="level is-mobile">
    <div class="is-flex-1">
      {{#if replicationUnsupported}}
        Unsupported
      {{else if replicationEnabled}}
        <div>
          {{concat (if (eq mode 'performance') 'Performance ' 'Disaster Recovery ') (capitalize modeForUrl)}}
        </div>
        {{#if secondaryId}}
          <small>
            <code>
             {{secondaryId}}
            </code>
          </small>
        {{/if}}
        <small>
          <code>
            {{clusterIdDisplay}}
          </code>
        </small>
        {{else if (and (eq mode 'performance') (not (has-feature "Performance Replication")))}}
        Learn more
      {{else if auth.currentToken}}
        Enable {{if (eq mode 'performance') 'Performance' 'Disaster Recovery'}}
      {{else}}
        <span class="has-text-grey-light">
          {{if (eq mode 'performance') 'Performance' 'Disaster Recovery'}}
        </span>
      {{/if}}
    </div>
    <div class="level-right">
      {{#if replicationEnabled}}
        {{#if (cluster-states modeState)}}
          <span class="{{if (get (cluster-states modeState) "isOk") "has-text-success" "has-text-danger"}}">
            <Icon
              aria-hidden="true"
              @glyph={{get (cluster-states modeState) "glyph"}}
            />
          </span>
        {{else if syncProgress}}
          <progress value="{{syncProgressPercent}}" max="100" class="progress is-small is-narrow is-info">
            {{syncProgress.progress}} of {{syncProgress.total}} keys
          </progress>
        {{/if}}
      {{else}}
        <Icon
          aria-label="Replication not enabled"
          @glyph="minus-circle-outline"
          class="has-text-grey-light"
        />
      {{/if}}
    </div>
  </div>
{{else}}
{{!-- this is the replication index page --}}
  <div class="level">
    <div class="replication-description level-left">
    <div>
    {{#if (and (eq mode 'performance') (not (has-feature 'Performance Replication')))}}
      <p>
        Performance Replication is a feature of Vault Enterprise Premium.
      </p>
      <p class="has-text-centered">
        <a
          href="https://hashicorp.com/products/vault/trial?source=vaultui_Performance%20Replication"
          class="button is-ghost has-icon-right"
          data-test-upgrade-link="true"
        >
          Learn more
          <Chevron />
        </a>
      </p>
    {{else if replicationEnabled}}
        <h6 class="title is-6 is-uppercase">
          Enabled
        </h6>
      <div class="detail-tags">
        <span class="has-text-grey">
          {{capitalize modeForUrl}}
        </span>
        {{#if secondaryId}}
          <span class="tag is-light has-text-grey-dark">
            <code>
              {{secondaryId}}
            </code>
          </span>
        {{/if}}
        <span class="tag is-light has-text-grey-dark">
          <code>
            {{clusterIdDisplay}}
          </code>
        </span>
      </div>
    {{/if}}
    <p class="help has-text-grey-dark">
      {{replication-mode-description mode}}
    </p>
  </div>
</div>
<div class="level-right">
  {{#if replicationDisabled}}
    {{#link-to 'mode.index' cluster.name mode class='button is-primary'}}
      Enable
    {{/link-to}}
  {{else}}
    {{#link-to 'mode.index' cluster.name mode class="button is-secondary"}}
      Details
    {{/link-to}}
  {{/if}}
</div>
  </div>
{{/if}}
